<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<audio class="countBackMusic" src="music/6827.mp3" hidden="hidden"></audio>
		<div class="allBg">
			<!--首页-->
			<div class="indexWeb">
				<div class="logo">
					<img src="img/indexLogo.png" />
				</div>
				<div class="bottle">
					<img src="img/bottle.png" />
				</div>
				<div class="button1">
					<img src="img/button1.png" />
				</div>
				<div class="button2">
					<img src="img/button2.png" />
				</div>
				<div class="play">
					<img src="img/play.png" />
				</div>
				<div class="whiteBg">
					<img src="img/whiteBg.png" />
				</div>
				<div class="bgActive">
					<img src="img/bjdonhua.png" />
				</div>
			</div>
			<!--游戏说明-->
			<div class="gameDescription hidden">
				<div class="description">
					<img src="img/description.png" />
				</div>
				<div class="back">
					<img src="img/back.png" />
				</div>
			</div>

			<!--抽取葡萄力-->
			<div class="drawPuTaoLi hidden">
				<div class="drawtext">
					<img src="img/open.png" />
				</div>
				<div class="PuTaoLi">
					<div>
						<img src="img/indraw.png" />
					</div>
					<div>
						<img src="img/indraw.png" />
					</div>
					<div>
						<img src="img/indraw.png" />
					</div>
					<div>
						<img src="img/indraw.png" />
					</div>
				</div>
			</div>
			<!--三等奖-->
			<div class="third hidden">
				<div class="congratulationThird">
					<img src="img/third.png" />
				</div>
				<div class="PuTaoLi">
					<img src="img/indraw.png" />
				</div>
				<div class="fiveDiscount">
					<img src="img/fiveDiscount.png" />
				</div>
				<div class="rightNow">
					<img src="img/rightNow.png" />
				</div>
			</div>
			<!--二等奖-->
			<div class="second hidden">
				<div class="congratulationSecond">
					<img src="img/second.png" />
				</div>
				<div class="aBoxPuTaoLi">
					<img src="img/aBoxPuTaoLi.png" />
				</div>
				<div class="writeInfo">
					<img src="img/writeInfo.png" />
				</div>
			</div>
			<!--信息页面-->
			<div class="infoWeb hidden">
				<p>请填写以下个人资料</p>
				<form class="form" action="" method="post">
					&emsp;姓名&ensp;<input type="text" /><br /> &emsp;电话&ensp;<input type="text" /><br /> &emsp;邮箱&ensp;<input type="text" /><br /> &emsp;邮编&ensp;<input type="text" /><br />
					<div class="address">
						<span>&emsp;地址&ensp;</span>
						<textarea name="" rows="" cols=""></textarea>
					</div>
					<div class="submit">
						<img src="img/submit.png"/>
					</div>
				</form>
			</div>
				
			<div class="otherWebBg hidden">
				<!--摇动页面-->
				<audio class="shakingMusic" src="music/5378.mp3" hidden="hidden"></audio>
				<div class="shakeWeb hidden">
					<div class="lodingBorder">
						<img src="img/lodingBorder.png" />
						<div class="loading">
							<img src="img/loding.png" />
						</div>
					</div>
					<div class="shakeBottle">
						<img src="img/bottle1.png" />
						<div class="shakePhone">
							<img src="img/shakeHand.png" />
						</div>
					</div>
					<div class="boom">
						<img src="img/boom_03.png" />
					</div>
					<div class="hand hidden">
						<img src="img/hand.png" />
					</div>
					<div class="hurryUp1">
						<img src="img/hurryUp1.png" />
					</div>
					<div class="hurryUp2">
						<img src="img/hurryUp2.png" />
					</div>
					<div class="hurryUp3">
						<img src="img/hurryUp1.png" />
					</div>
					<div class="hurryUp4">
						<img src="img/hurryUp4.png" />
					</div>
					<div class="countBack">
						<img src="img/3.png" alt="" />
					</div>
				</div>
				<!--太弱了-->
				<audio class="failMusic" src="music/1756.mp3" hidden="hidden"></audio>
				<div class="soBad hidden">
					<img src="img/soBad.png" />
					<div class="bgm">

					</div>
					<div class="back">
						<img src="img/back.png" />
					</div>
					<div class="lodingBorder">
						<img src="img/lodingBorder.png" />
						<div class="loading">
							<img src="img/loding.png" />
						</div>
					</div>
					<div class="music">
						<img src="img/noMusic.png" />
					</div>
					<div class="again">
						<img src="img/againButton.png" />
					</div>
				</div>
				<!--不错呦-->
				<div class="soGood hidden">
					<img src="img/soGood.png" />
					<div class="bgm">

					</div>
					<div class="back">
						<img src="img/back.png" />
					</div>
					<div class="lodingBorder">
						<img src="img/lodingBorder.png" />
						<div class="loading">
							<img src="img/loding.png" />
						</div>
					</div>
					<div class="music">
						<img src="img/noMusic.png" />
					</div>
					<div class="again">
						<img src="img/againButton.png" />
					</div>
				</div>
				<!--太棒了-->
				<audio class="successMusic" src="music/4898.mp3" hidden="hidden"></audio>
				<div class="soWell hidden">
					<img src="img/soWell.png" />
					<div class="bgm">

					</div>
					<div class="back">
						<img src="img/back.png" />
					</div>
					<div class="lodingBorder">
						<img src="img/lodingBorder.png" />
						<div class="loading">
							<img src="img/loding.png" />
						</div>
					</div>
					<div class="music">
						<img src="img/noMusic.png" />
					</div>
					<div class="draw">
						<img src="img/instantDraw.png" />
					</div>
				</div>
				<!--100%-->
				<div class="fullPresent hidden">
					<img src="img/100present.png" />
					<div class="bgm">

					</div>
					<div class="back">
						<img src="img/back.png" />
					</div>
					<div class="lodingBorder">
						<img src="img/lodingBorder.png" />
						<div class="loading">
							<img src="img/loding.png" />
						</div>
					</div>
					<div class="music">
						<img src="img/noMusic.png" />
					</div>
					<div class="draw">
						<img src="img/instantDraw.png" />
					</div>
				</div>
				<!--分享页面-->
				<div class="shareWeb hidden">
					<div class="putaoli">
						<img src="img/drawPuTaoLi.png"/>
					</div>
					<div class="shareBg">
						<img src="img/share.png"/>
					</div>
				</div>
				<!--没抽中奖-->
				<div class="noReward hidden">
					<div class="alittle">
						<img src="img/nodraw.png"/>
					</div>
					<div class="again">
						<img src="img/again.png"/>
					</div>
					<div class="callF">
						<img src="img/callFriends.png"/>
					</div>
					<div class="buttomputaoli">
						<img src="img/nodrawputaoli.png"/>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var speed = 60; // 用来判定的加速度阈值，太大了则很难触发
			var x, y, z, lastX, lastY, lastZ;
			x = y = z = lastX = lastY = lastZ = 0;
			var shake;
			var awardWeb;
			//按键反馈
			$(".play,.button1,.button2,.again,.draw,.back,.rightNow,.writeInfo,.submit,.callF").on("touchstart", function() {
				$(this).addClass("touch");
			})
			$(".play,.button1,.button2,.again,.draw,.back,.rightNow,.writeInfo,.submit,.callF").on("touchend", function() {
				$(this).removeClass("touch");
			})
			//start按键功能设置
			$(".play,.again").on("click", function() {
				$(".fullPresent .loading img").css("transform", "translateX(-100%)");
				$(".soBad .loading img").css("transform", "translateX(-100%)");
				$(".soGood .loading img").css("transform", "translateX(-100%)");
				$(".soWell .loading img").css("transform", "translateX(-100%)");
				$(".indexWeb").addClass("hidden");
				$(".shakeWeb").removeClass("hidden").siblings().addClass("hidden");
				$(".otherWebBg").removeClass("hidden");
				$(".countBack").removeClass("hidden");
				$(".countBackMusic")[0].play();
				awardWeb = 0;
				shake = 100;
				$('.shakeWeb .loading img').css("transform", "translateX(-" + shake + "%)");
				var countBack = setTimeout(function() {
					$(".countBack").addClass("hidden");
					//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)
					if(window.DeviceMotionEvent) {
						//$(".shakingMusic")[0].play();
						window.addEventListener('devicemotion', function(e) {
							var acceleration = e.accelerationIncludingGravity;
							x = acceleration.x;
							y = acceleration.y;
							if(Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
								// 用户设备摇动了，触发响应操作
								// 此处的判断依据是用户设备的加速度大于我们设置的阈值

								shake--;
								shake < 0 ? shake = 0 : shake;
								awardWeb = 100 - shake;
								$('.shakeWeb .loading img').css("transform", "translateX(-" + shake + "%)");
							}
							lastX = x;
							lastY = y;
						}, false);
					}
				}, 3000)
				var back2s = setTimeout(function() {
					$(".countBack img").attr("src", "img/2.png")
					var back1s = setTimeout(function() {
						$(".countBack img").attr("src", "img/1.png")
						var back0s = setTimeout(function() {
							$(".countBack img").attr("src", "img/3.png")
						}, 1000)
					}, 1000)
				}, 1000)
				var shakeTime = setTimeout(function() {
					$(".shakingMusic")[0].pause();
					$(".shakeWeb").addClass("hidden")
					if(awardWeb <= 20) {
						$(".soBad").removeClass("hidden")
						alert("菜鸡才" + awardWeb + "%")
						$(".soBad .loading img").css("transform", "translateX(-" + shake + "%)")
						$(".failMusic")[0].play();
					} else if(awardWeb > 20 && awardWeb <= 40) {
						$(".soGood").removeClass("hidden")
						alert("菜鸟才" + awardWeb + "%")
						$(".soGood .loading img").css("transform", "translateX(-" + shake + "%)")
						$(".failMusic")[0].play();
					} else if(awardWeb > 40 && awardWeb <= 99) {
						$(".soWell").removeClass("hidden")
						alert("含棒棒哦！居然" + awardWeb + "%")
						$(".soWell .loading img").css("transform", "translateX(-" + shake + "%)")
						$(".successMusic")[0].play();
					} else if(awardWeb = 100) {
						$(".fullPresent").removeClass("hidden")
						alert("老子设计的游戏你居然" + awardWeb + "%")
						$(".fullPresent .loading img").css("transform", "translateX(-" + shake + "%)")
						$(".successMusic")[0].play();
					}
				}, 13000)
			})
			//botton2功能设置
			$(".button2").on("click", function() {
				$(".indexWeb").toggleClass("hidden");
				$(".gameDescription").toggleClass("hidden");
			})
			//游戏说明页面功能
			$(".back").on("click", function() {
				location.reload();
			})
			//抽奖按键
			$(".draw").on("click",function(){
				$(".otherWebBg").addClass("hidden");
				$(".fullPresent").addClass("hidden")
				$(".soWell").addClass("hidden")
				$(".drawPuTaoLi").removeClass("hidden");
			})
			//抽奖页面
			$(".drawPuTaoLi .PuTaoLi div").on("click",function(){
				$(".drawPuTaoLi").addClass("hidden");
				var res = Math.floor(Math.random()*10)
				if(res<4){
					$(".third").removeClass("hidden")
				}else if(res<8){
					$(".otherWebBg").removeClass("hidden")
					$(".noReward").removeClass("hidden")
				}else{
					$(".second").removeClass("hidden")
				}
			})
			//填写信息
			$(".writeInfo").on("click",function(){
				$(".second").addClass("hidden")
				$(".infoWeb").removeClass("hidden")
			})
			$(".submit").on("click",function(){
				$(".form").submit()
			})
			//三等奖兑换分享
			$(".rightNow").on("click",function(){
				$(".shareWeb").removeClass("hidden")
				$(".otherWebBg").removeClass("hidden")
				$(".third").addClass("hidden")
			})
		</script>
	</body>

</html>